/**
 * 呆若木鸡的stateless快递选择组件
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import FixedView from 'components/FixedView';
import showHide from '@wpt/showHide';
import { onTouchEnd } from 'wpt';

import './index.less';

const API = WPT.Util.handleApi({
    getDelivery: '/v1.0/deliveryinfo/get-hot-and-often-used-delivery-l',
});

@showHide
export default class DeliveryPicker extends PureComponent {
    static defaultProps = {
        currentCom: '',
        hotList: [],
        commonList: [],
        close: () => {},
        onSelect: () => {},
    };

    static propTypes = {
        // 默认快递公司
        currentCom: PropTypes.string,
        // 初始显示状态
        commonList: PropTypes.array,
        hotList: PropTypes.array,
        close: PropTypes.func,
        onSelect: PropTypes.func,
    };

    state = {
        defaultCom: this.props.currentCom,
        hotList: this.props.hotList,
        commonList: this.props.commonList,
    };

    onPageShow = () => {
        this.getDelivery();
    };

    getDelivery = () => {
        WPT.getData(API.getDelivery, null, res => {
            if (res.code === 0) {
                this.setState({
                    hotList: res.data.hotDeliveryList,
                    commonList: res.data.normalDeliveryList,
                });
            }
        });
    };

    onSelect = item => {
        this.setState(
            {
                defaultCom: item.com,
            },
            () => {
                this.props.close();
                this.props.onSelect(item);
            }
        );
    };

    getDeliveryItem = item => (
        <div
            key={item.com}
            className={classnames({
                item: true,
                selected: this.state.defaultCom === item.com,
            })}
            {...onTouchEnd(() => this.onSelect(item))}
        >
            {item.name}
        </div>
    );

    render() {
        const { commonList, hotList } = this.state;

        return (
            <FixedView top={0} className={classnames('ModuleDeliverPicker')} {...onTouchEnd(this.props.close)}>
                <div className="delivery hot">
                    <div className="title">
                        热门快递
                        {' '}
                        <span>关闭</span>
                    </div>
                    <div className="deliveryList">{hotList.map(this.getDeliveryItem)}</div>
                </div>
                <div className="delivery normal">
                    <div className="title">
                        常用快递
                        <Link className="item manage" href="/webApp/delivery">
                            更多
                            <i className="wptFM icon-fm-arrowright" />
                        </Link>
                    </div>
                    <div className="deliveryList">{commonList.map(this.getDeliveryItem)}</div>
                </div>
            </FixedView>
        );
    }
}
